<template>
	<view class="film">
		<image src="https://cdn.xtde.cn/wxapp/xtde/RankingList/film-banner.jpg" class="top-banner" mode="widthFix"></image>
		<view class='ranklist'>
			<view class='ranklist-title'>
				<view class='left-title'>院线电影日票房排行榜</view>
				<view class='right-title'>*{{closingTime}}</view>
			</view>
			<view class="table">
				<view class="tr bg-w">
					<view class="th w1">排名</view>
					<view class="th w2">电影名</view>
					<view class="th w3">上映天数</view>
					<view class="th w4">累计票房</view>
					<view class="th w5">日票房</view>		
				</view>
				<block v-if="isloading">
					<view class='skeleton-table-item'>
						<van-skeleton :row="10"></van-skeleton>
					</view> 	
				</block>
				<block v-else-if="listData.length !== 0">
					<view :class="index % 2 === 1 ? 'tr bg-g':'tr'" v-for="(item, index) in listData" :key="index">
						<view class="td w1">
							<block v-if="index === 0">
								<image src="https://cdn.xtde.cn/wxapp/xtde/RankingList/top1.png" class="top-icon"></image>
							</block>
							<block v-else-if="index === 1">
								<image src="https://cdn.xtde.cn/wxapp/xtde/RankingList/top2.png" class="top-icon"></image>
							</block>
							<block v-else-if="index === 2">
								<image src="https://cdn.xtde.cn/wxapp/xtde/RankingList/top3.png" class="top-icon"></image>
							</block>
							<block v-else>
								{{index + 1}}
							</block>
						</view>
						<view class="td w2">{{item.name}}</view>
						<view class="td w3">{{item.days + '天'}}</view>
						<view class="td w4">{{item.total2 === '0.0' ? '-' : item.total2}}</view>
						<view class="td w5">{{item.total1 + '万'}}</view>		
					</view>
				</block>
				<block v-else>
					<view class='nodata'>
						<view>无数据显示</view>
					</view>
				</block>	
			</view>
		</view>
		<com-footer></com-footer>
	</view>
</template>

<script>
	const api = require('../../../../wxapi/config.js')
	const util = require('../../../../utils/util.js')
	import ComFooter from '../../../../component/footer/ComFooter.vue';
	export default {
		components: {
			ComFooter
		},
		data () {
			return {
				listData: [],
				isloading: true,
				skeleton: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				closingTime: ''
			}
		},
		onLoad (options) {
			this.getData()  
			this.closingTime = util.formatClosingTime(new Date())
		},
		methods: {
			getData () {
				this.isloading = true;
				api.getMovieList().then((res) => {
					if (res.data.data && res.data.data.length !== 0) {
						this.listData = res.data.data;
						this.isloading =  false;
					} else {
						this.listData = [];
						this.isloading =  false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	@import '../ranking.wxss';
	.w1{
		width: 8%;
	}
	.w2{
		width: 35%;
		justify-content: flex-start;
	}
	.w3{
		width: 17%;
	}
	.w4{
		width: 20%;
	}
	.w5{
		width: 20%;
	}
</style>
